<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title></title>
	<script type="text/javascript">
        window.onload = function(){
        	var oTab = document.getElementById('tab1');
        	var oTxt= document.getElementById('txt');
            var oBtn = document.getElementById('btn1');

            oBtn.onclick = function(){
                //循环行数
                for(var i=0;i<oTab.tBodies[0].rows.length;i++){
                    //假如搜索的字段跟所在表格的字段相同，则把该行变亮
                    //cells[1]:表示姓名
                    
                    //忽略大小写搜索
                    //sTab表示从表格取出的值
                    var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
                    //sTxt 表示从文本框取出 的值
                    var sTxt = oTxt.value.toLowerCase();

                    oTab.tBodies[0].rows[i].style.display = 'none'; //先把所有的信息隐藏

                    //split切分关键字，用个数组存放
                    var arr = sTxt.split(' '); //以空格切分

                    //循环数组
                    for(var j=0;j<arr.length;j++){
                        //模糊搜索 search  找到返回字符串出现的位置，没找到返回-1
                        //判断，假如搜索文本框里的值不等于-1，说明有找到
                        if(sTab.search(arr[j])  !== -1 ){
                            oTab.tBodies[0].rows[i].style.display = 'block'; //筛选结果显示
                        };

                    };

                   
                };
            };
        };
	</script>
</head>
<body>
   
    姓名：<input id="txt" type="text" />
    <input id="btn1" type="button" value="搜索" />
    <table id="tab1" border="1" width="500px">
    	<thead>
    		<tr>
    			<td>ID</td>
    			<td>姓名</td>
    			<td>年龄</td>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td>1</td>
    			<td>Blue</td>
    			<td>27</td>
    		</tr>
    		<tr>
    			<td>2</td>
    			<td>小潘</td>
    			<td>27</td>
    		</tr>
    		<tr>
    			<td>3</td>
    			<td>邓狗</td>
    			<td>22</td>
    		</tr>
    		<tr>
    			<td>4</td>
    			<td>张三</td>
    			<td>23</td>
    		</tr>
    		<tr>
    			<td>5</td>
    			<td>李四</td>
    			<td>25</td>
    		</tr>
    		<tr>
    			<td>6</td>
    			<td>王五</td>
    			<td>21</td>
    		</tr>
            <tr>
                <td>7</td>
                <td>小张</td>
                <td>21</td>
            </tr>
            <tr>
                <td>8</td>
                <td>李子</td>
                <td>21</td>
            </tr>
    	</tbody>
    </table>
	
</body>
</html>